{% extends "base.html" %}
{% block content %}

<div class="flex flex-col py-6 px-6 mt-6 bg-slate-100">
    <div>
    <button class="button flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 mb-6 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
    data-modal-target="#tenantModal" data-modal-toggle="modal">
        Create Tenant
    </button>
</div>
<div class="relative py-4">
    <div class="absolute inset-0 flex items-center">
      <div class="w-full border-b border-slate-500"></div>
    </div>
    <div class="relative flex justify-center">
      <span class="bg-slate-100 px-4 text-sm text-gray-900">or</span>
    </div>
  </div>
    <div>
        <h2 class="mt-5 mb-5 text-center text-md font-semibold text-gray-900">Use Existing Tenant</h2>
        <ul role="list" class="divide-y divide-gray-100 border border-slate-500">
            {% for tenant in object_list %}
            <li class="flex justify-between gap-x-6 py-3 px-5 items-center hover:cursor-pointer" onclick="location.href='{% url "todos" tenant.id %}'">
                <div class="flex min-w-0 gap-x-4">
                    <div class="min-w-0 flex-auto ">
                        <div class="text-md text-gray-900" >
                            {{ tenant.name }}</div>
                    </div>
                </div
            </li>
            {% endfor %}
        </ul>
    </div>
    <div class="mt-5 text-center text-gray-900">
        You are logged in as '{{ user.email }}' (<a href="{% url 'logout' %}"> Logout</a>)
    </div>
  </div>

    <!-- Modal -->
    <div id="tenantModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg shadow-lg w-1/2">
            <div class="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
                <h5 class="text-lg font-bold">Add Tenant</h5>
                <button class="text-gray-400 hover:text-gray-600" data-modal-target="#tenantModal" data-modal-toggle="modal">&times;</button>
            </div>
            <div class="p-4">
                <form id="tenantForm" method="post" action="{% url 'tenant-add' %}" novalidate>
                    {% csrf_token %}
                    {% include './tenants_form.html' %}
                    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded mt-3">Submit</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Script to handle modal and dialog --> 

     <script>
        document.addEventListener('DOMContentLoaded', function() {
            const modalToggle = document.querySelectorAll('[data-modal-toggle="modal"]');
            modalToggle.forEach(button => {
                button.addEventListener('click', function() {
                    const modal = document.querySelector(button.getAttribute('data-modal-target'));
                    modal.classList.toggle('hidden');
                });
            });

            const form = document.getElementById('tenantForm');
            form.addEventListener('submit', async function(event) {
                event.preventDefault();

                const formData = new FormData(form);
                const csrfToken = formData.get('csrfmiddlewaretoken');

                const response = await fetch(form.action, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': csrfToken,
                    },
                    body: formData
                });

                if (response.ok) {
                    const modal = document.getElementById('tenantModal');
                    modal.classList.add('hidden');
                    location.reload();
                } else {
                    const errors = await response.json();
                    for (let field in errors) {
                        const errorDiv = document.querySelector(`[name=${field}]`).nextElementSibling;
                        if (errorDiv) {
                            errorDiv.textContent = errors[field].join(' ');
                            errorDiv.classList.add('text-red-500');
                        }
                    }
                }
            });
        });
    </script>




{% endblock %}